<template>
  <div class="main">
    <div class="header-card">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="title">{{ $t("Message") }}</div>
      </div>
    </div>
    <div class="list">
      <van-list
        v-model="listLoading"
        @load="onLoadList"
        :finished="this.list.length >= this.pages.total && this.pages.total > 0"
        :finished-text="$t('NoMore')"
      >
        <div class="nodata" v-show="pages.nodata">
          <img src="@/assets/img/default.jpg" />
          <p>{{ $t("NoNotice") }}</p>
        </div>

        <div class="item" v-for="v in list" :key="v.time">
          <div class="p-title">{{ v.title }}</div>
          <div class="p-time">{{ getTimes(v.datetime) }}</div>
          <div class="p-txt">
            {{ v.content }}
          </div>
          <div class="p-box">
            <div class="p-icon-box">
              <p
                class="p-icon"
                v-for="(item, index) in v.diamond.length"
                :key="index"
              >
                <img :src="v.diamond_icon" alt="" />
              </p>
            </div>
            <div
              class="p-btn"
              v-if="v.is_receive === 0 && v.diamond && v.diamond.length > 0"
              @click="getDiamond(v)"
            >
              {{ $t("Dapatkan") }}
            </div>
            <div class="p-success" v-if="v.is_receive === 1"></div>

            <!-- <div class="p-btn" v-if="v.is_receive === 0 && v.is_receive == 0" @click="getDiamond(v)" >Get</div> -->
            <!-- <div class="p-success" v-if="v.is_receive == 1"></div> -->
          </div>
        </div>
      </van-list>
    </div>
    <van-popup v-model="showReceive" round>
      <div class="popbox">
        <div class="popup-title">Receive</div>
        <div class="popup-content">
          <p
            class="p-icon"
            v-for="(item, index) in popupObj?.diamond?.length"
            :key="index"
          >
            <img :src="popupObj.diamond_icon" alt="" />
          </p>
        </div>
        <div class="querybtn" @click="showReceive = false">{{ $t("OK") }}</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { httpNoticeList, httpReceive } from "@/http/api";
import { getTimes } from "@/utils/common";
export default {
  name: "message",
  data() {
    return {
      list: [],
      showReceive: false,
      listLoading: false,
      listAjax: false,
      diamond: [],
      pages: {
        // 分页信息
        page: 1,
        total: 0,
        total_page: 0,
        nodata: false,
      },
      popupObj: {},
    };
  },
  created() {
    sessionStorage.setItem("SMessage", true);
  },
  methods: {
    getTimes,
    async getHttpNoticeList(flag) {
      if (this.listAjax) return;
      let params = {
        page: this.pages.page,
      };
      this.listAjax = true;
      let res = await httpNoticeList(params);
      this.listAjax = false;
      this.listLoading = false;
      if (res.code === 10001) {
        return this.$router.push("/login");
      }
      if (res.code == 0) {
        if (flag) {
          this.list = [...res.data.list];
        } else {
          this.list = [...this.list, ...res.data.list];
        }
        this.pages.total = res.data.page.total_count;
        this.pages.total_page = res.data.page.total_page;

        if (this.list.length < this.pages.total) this.pages.page++;
        if (!this.pages.total) this.pages.nodata = true;
      }
    },
    // 领取礼物
    async getDiamond(item) {
      const { id } = item;
      const res = await httpReceive({ message_id: id });
      if (res.code == 0) {
        this.getHttpNoticeList("reload");
        this.popupObj = { ...item };
        this.showReceive = true;
      }
    },
    onLoadList() {
      if (this.pages.nodata) return (this.listLoading = false);
      if (this.list.length == this.pages.total && this.pages.total > 0)
        return (this.listLoading = false);
      this.listLoading = true;
      this.getHttpNoticeList();
    },
  },
};
</script>

<style lang="less" scoped>
.popbox {
  width: 90vw;
  overflow: hidden;
  padding: 50px 30px 40px;

  .popup-content {
    display: flex;
    width: 100%;
    margin-top: 50px;
    flex-wrap: wrap;

    .p-icon {
      width: 25%;
      text-align: center;
      margin-bottom: 10px;

      img {
        width: 80px;
        height: 80px;
      }
    }
  }

  .popup-title {
    width: 100%;
    text-align: center;
  }

  .querybtn {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    background: linear-gradient(
      178.44deg,
      rgba(238, 220, 201, 1) 0%,
      rgba(220, 188, 155, 1) 100%
    );
    box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);
    border-radius: 15px;
    color: #fff;
    font-size: 40px;
    user-select: none;
  }
}

.main {
  min-height: 100vh;
  //background: rgba(246, 247, 252, 1);

  .header-card {
    width: 750px;
    height: 155px;
    // background: url("~@/assets/img/ucheader2.png") center/750px 155px;

    .uc-header {
      padding-top: 60px;
    }
  }

  .list {
    width: 100%;
    padding: 32px;
    color: aqua;

    .item {
      width: 682px;
      background: #e5c184;
      box-shadow: 0px 3px 12px 0px rgba(213, 213, 213, 0.56);
      border-radius: 20px;
      padding: 32px;
      margin-bottom: 20px;
      color: rgba(132, 144, 177, 1);

      // color: aqua;
      .p-title {
        font-size: 32px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 1.3;
      }

      .p-txt {
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 2px;
        line-height: 1.3;
      }

      .p-time {
        font-size: 24px;
        font-weight: 400;
        letter-spacing: 0px;
        padding: 20px 0;
      }

      .p-box {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        align-items: center;
      }

      .p-icon-box {
        display: flex;
      }

      .p-icon {
        width: 80px;
        height: 80px;
        border: 1px solid rgba(132, 144, 177, 1);
        border-radius: 10px;
        margin-right: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .p-btn {
        font-size: 4.667vw;
        color: rgba(255, 255, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 55px;
        background: rgba(255, 226, 196, 1);
        border-radius: 10px;
      }

      .p-success {
        width: 40px;
        height: 72px;
        border-right: 18px solid rgba(255, 226, 196, 1);
        border-bottom: 18px solid rgba(255, 226, 196, 1);
        transform: rotate(40deg);
        margin-right: 45px;
        margin-bottom: 15px;
      }
    }
  }
}
</style>
